<template>
  <div class="InformationListAdd">
    <div class="flex location-wrap">
      <span class="white">当前位置：</span>
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/EDManagement' }">应急处置</el-breadcrumb-item>
        <el-breadcrumb-item>应急指挥部</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="InformationListAdd-center">
      <TimeLine :activities="activities" />
      <div class="Approval-add">
        <div class="NoticeListAdd-add-title">
          <p>{{DetailList.title}}</p>
          <span>响应命令单：<a @click="toEmergencyResponselist" style="color:#3561fd;text-decoration: underline;cursor:pointer">{{DetailList.responseName}}</a></span>
        </div>
        <el-row>
          <el-button size="mini" @click="AddFh" style="margin-top:10px;">返回</el-button>
        </el-row>
        <div class="footer">
          <LsdDialogTitle slot="dialog" :titleConfig="titleConfig" :activeNames="activeNames">
            <LsdDialogTitle slot="slot1" :titleConfig="titleConfig1" :activeNames="activeNames1">
              <div slot="slot1.1">
                <LsdTable slot="zhry" :compRef="tableList.compRef" ref="gjxm" :columns="tableList.columns" :tableData="tableList.tableData" :tableAttr="tableList.tableAttr" :isSequenceFlag="tableList.isSequenceFlag" />
              </div>
              <div slot="slot2.1">
                <LsdTable slot="fzfz" :compRef="tableList1.compRef" ref="gjxm1" :columns="tableList1.columns" :tableData="tableList1.tableData" :tableAttr="tableList1.tableAttr" :isSequenceFlag="tableList1.isSequenceFlag" />
              </div>
            </LsdDialogTitle>
            <LsdDialogTitle slot="slot2" :titleConfig="titleConfig1" :activeNames="activeNames1">
              <div slot="slot1.1">
                <!-- <LsdTable slot="zhry" :compRef="tableList.compRef" ref="gjxm2" :columns="tableList.columns" :tableData="tableList.tableData" :tableAttr="tableList.tableAttr" :isSequenceFlag="tableList.isSequenceFlag" /> -->
              </div>
              <div slot="slot2.1">
                <!-- <LsdTable slot="fzfz" :compRef="tableList1.compRef" ref="gjxm3" :columns="tableList1.columns" :tableData="tableList1.tableData" :tableAttr="tableList1.tableAttr" :isSequenceFlag="tableList1.isSequenceFlag" /> -->
              </div>
            </LsdDialogTitle>
            <LsdDialogTitle slot="slot3" :titleConfig="titleConfig1" :activeNames="activeNames1">
              <div slot="slot1.1">
                <!-- <LsdTable slot="zhry" :compRef="tableList.compRef" ref="gjxm4" :columns="tableList.columns" :tableData="tableList.tableData" :tableAttr="tableList.tableAttr" :isSequenceFlag="tableList.isSequenceFlag" /> -->
              </div>
              <div slot="slot2.1">
                <!-- <LsdTable slot="fzfz" :compRef="tableList1.compRef" ref="gjxm5" :columns="tableList1.columns" :tableData="tableList1.tableData" :tableAttr="tableList1.tableAttr" :isSequenceFlag="tableList1.isSequenceFlag" /> -->
              </div>
            </LsdDialogTitle>
          </LsdDialogTitle>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import TimeLine from "@/components/component/timeLine.vue";
import { viewDetail } from "@/api/EmergencyDisposal/yjzhb.js";
import { getFlowList } from "@/api/EmergencyDisposal/yjsj.js";
export default {
  name: "Headquarters",
  components: { TimeLine },
  data() {
    return {
      tableList1: {
        isSelectFlag: true,
        compRef: "fzfz",
        isSequenceFlag: false,
        isShowPage: true,
        resetFlag: true,
        loading: false,
        title: "响应命令单列表",
        actions: [],
        tableData: [],
        columns: [
          {
            prop: "workGroup",
            label: "工作组名称",
            align: "center",
            "min-width": "80px"
          },
          {
            prop: "userName",
            label: "组长",
            align: "center",
            "min-width": "70px"
          },
          {
            prop: "headquartersId",
            label: "联系方式",
            align: "center",
            "min-width": "80px"
          },
          {
            prop: "unitDept",
            label: "单位及部门",
            align: "left",
            "min-width": "100px"
          },
          {
            prop: "duty",
            label: "职务",
            align: "center",
            "min-width": "80px"
          },
          {
            prop: "members",
            label: "成员",
            align: "left",
            "min-width": "80px"
          },
          {
            prop: "responsibility",
            label: "职责",
            align: "left",
            "min-width": "200px"
          }
        ],
        tableAttr: {
          height: "255",
          stripe: false,
          border: true,
          fit: true,
          "show-header": true,
          "highlight-current-row": true,
          "cell-style": {
            "font-size": "16px"
          },
          "header-cell-style": {
            "text-align": "center",
            "background-color": "#B1C8F9",
            border: "1px solid #ccc",
            "font-size": "16px"
          }
        }
      },
      tableList: {
        isSelectFlag: true,
        compRef: "zhry",
        isSequenceFlag: false,
        isShowPage: true,
        resetFlag: true,
        loading: false,
        title: "响应命令单列表",
        actions: [],
        tableData: [],
        columns: [
          {
            prop: "post",
            label: "岗位",
            align: "center",
            "min-width": "60px"
          },
          {
            prop: "userName",
            label: "姓名",
            align: "center",
            "min-width": "60px"
          },
          {
            prop: "contact",
            label: "联系方式",
            align: "center",
            "min-width": "60px"
          },
          {
            prop: "unitDept",
            label: "单位及部门",
            align: "center",
            "min-width": "100px"
          },
          {
            prop: "duty",
            label: "职务",
            align: "center",
            "min-width": "80px"
          },
          {
            prop: "responsibility",
            label: "职责",
            align: "left",
            "min-width": "200px"
          }
        ],
        tableAttr: {
          height: "255",
          stripe: false,
          border: true,
          fit: true,
          "show-header": true,
          "highlight-current-row": true,
          "cell-style": {
            "font-size": "16px"
          },
          "header-cell-style": {
            "text-align": "center",
            "background-color": "#B1C8F9",
            border: "1px solid #ccc",
            "font-size": "16px"
          }
        }
      },
      // 折叠面板信息
      titleConfig1: [
        {
          title: "指挥人员",
          name: "1",
          slot: "slot1.1"
        },
        {
          title: "工作分组",
          name: "2",
          slot: "slot2.1"
        }
      ],
      activeNames1: ["1", "2"],
      // 折叠面板信息
      titleConfig: [
        {
          title: "省公司应急指挥部",
          name: "1",
          slot: "slot1"
        }
        // {
        //   title: "随州公司应急指挥部",
        //   name: "2",
        //   slot: "slot2"
        // },
        // {
        //   title: "现场应急指挥部",
        //   name: "3",
        //   slot: "slot3"
        // }
      ],
      activeNames: ["1"],
      active: 3,
      activities: [],
      DetailList: {},
      xymldId: ""
    };
  },
  mounted() {
    this.detailList();
    // this.getFlowList()
  },
  methods: {
    async detailList() {
      const res = await viewDetail({ id: this.$route.query.id });
      this.xymldId = res.responseId;
      this.DetailList = res;
      const result = res.commandGroupDetailVoList;
      if (res.headquartersLv === "0") {
        this.titleConfig[0].title = "省公司应急指挥部";
      } else if (res.headquartersLv === "1") {
        this.titleConfig[0].title = "现场指挥部";
      } else if (res.headquartersLv === "2") {
        this.titleConfig[0].title = "地市指挥部";
      }
      result.forEach(item => {
        item.members = (item.members).replace(/,/g, "、");
      });
      this.tableList1.tableData = result;
      this.tableList.tableData = res.commandUserDetailVoList;
      getFlowList({ emergencyId: res.emergencyId }).then(res => {
        this.activities = res;
      });

    },
    // 跳转响应命令单
    toEmergencyResponselist() {
      this.$router.push({
        path: "/EmergencyResponseinfo",
        query: { id: this.xymldId }
      });
    },
    // async getFlowList() {
    //   const res = await getFlowList({ emergencyId: this.$route.query.id })
    //   this.activities = res
    // },
    // 返回上一级
    AddFh() {
      this.$router.push({
        name: "Emheadquarterslist"
      });
    }
  }
};
</script>

<style scoped lang="less">
:deep(.el-row) {
  float: right;
  margin-right: 2%;
}
.leftLine {
  width: 6px;
  height: 20px;
  background: #236dfe;
  border-radius: 4px;
  margin: auto 8px auto 0;
}
.NoticeListAdd-add-title {
  width: 98%;
  height: 20%;
  margin: 0 auto;
  text-align: center;
  line-height: 50px;
  p {
    padding-top: 20px;
    font-size: 30px !important;
  }

  background-color: #f4f4f4;
}
.Approval-add {
  width: 83%;
  background-color: #fff;
  overflow-y: auto;
  border-radius: 5px;
  height: auto;
  padding: 20px 5px 0 5px;
  .footer {
    width: 98%;
    margin: 0 auto;
    padding-top: 40px;
    /deep/ .el-collapse-item__wrap {
      margin-left: 35px;
    }
  }
}
.InformationListAdd {
  width: 100%;
  height: 94%;
}
:deep(.el-breadcrumb) {
  font-size: 16px;
  line-height: initial;
}
:deep(.el-timeline) {
  width: 85%;
  margin-left: 35px;
  margin-top: 30px;
}

:deep(.el-breadcrumb__inner.is-link) {
  font-weight: 100;
  color: #fff;
}
:deep(.el-breadcrumb__item:last-child .el-breadcrumb__inner) {
  color: #3270ff;
}
.InformationListAdd-center {
  width: 100%;
  height: 100%;
  margin-top: 10px;
  display: flex;
  justify-content: space-between;
}
.InformationListAdd-sjx {
  width: 20%;
  height: 98%;
  margin-top: 8px;
  background-color: #fff;
  border-radius: 5px;
}
.InformationListAdd-add {
  width: 78%;
  height: 98%;
  margin-top: 8px;
  background-color: #fff;
  border-radius: 5px;
}
.InformationListAdd-add-top {
  width: 98%;
  height: 10%;
  margin: 0 auto;
  border-bottom: solid 2px #f4f4f4;
  display: flex;
}
.InformationListAdd-add-elrow {
  margin-left: 2%;
  margin-top: 10px;
}
.InformationListAdd-add-row {
  margin-left: 60%;
  margin-top: 10px;
}
.InformationListAdd-add-title {
  width: 98%;
  height: 20%;
  margin: 0 auto;
  text-align: center;
  line-height: 100px;
  font-size: 30px;
}
.InformationListAdd-add-form {
  width: 100%;
  height: 68%;
  margin: 0 auto;
  //   background-color: #3270ff;
}
.InformationListAdd-add-form-srk {
  width: 98%;
  height: 15%;
  // background-color: aliceblue;
  margin: 0 auto;
  margin-left: 50px;
}
.InformationListAdd-add-form-wb {
  width: 98%;
  height: 20%;
  margin-left: 50px;
  // background-color: aliceblue;
}
.InformationListAdd-add-form-scfj {
  width: 98%;
  height: 20%;
  margin-top: 10px;
  margin-left: 50px;
  //   background-color: #3270ff;
}
.InformationListAdd-add-form-add {
  width: 98%;
  height: 25%;
  //   background-color: aqua;
}
.InformationListAdd-add-form-wb-textarea {
  width: 80%;
  height: 20px;
}
.InformationListAdd-sjxs {
  width: 98%;
  height: 5%;
  margin-left: 30px;
  margin-top: 10px;
}
.title {
  border-bottom: 1px solid #ccc;
  padding-bottom: 8px;
}
.card {
  height: auto;
  margin-bottom: 20px;
  p {
    font-size: 16px;
    margin-top: 12px;
  }
}
.content {
  width: 90%;
  position: relative;
  left: 5%;
  p {
    font-size: 16px;
    margin-top: 12px;
  }
  table tr td {
    border: 1px solid #000;
    font-size: 12px;
    text-align: center;
    padding: 10px;
  }
}
:deep(.leftTopBtn){
 height: 0px !important;
}
:deep(.el-collapse-item__content){
  padding: 0 !important;
}
:deep(.el-collapse-item){
  padding-bottom: 10px;
}
</style>
